@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --primary: #3b82f6;
  --primary-light: #60a5fa;
  --primary-dark: #2563eb;
  --secondary: #10b981;
  --secondary-light: #34d399;
  --accent: #8b5cf6;
  --danger: #ef4444;
  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --header-height: 60px;
}

html {
  @apply antialiased;
}

body {
  width: 800px;
  height: 600px;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  @apply bg-gray-50;
}

@layer components {
  .bookmark-card {
    @apply p-4 rounded-lg border border-gray-200 bg-white transition-all duration-200 hover:shadow-md;
    box-shadow: var(--card-shadow);
  }
  
  .bookmark-card:hover {
    @apply translate-y-[-2px] shadow-lg;
  }

  .btn {
    @apply px-4 py-2 rounded-md font-medium text-white transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

  .btn-primary {
    @apply bg-blue-500 hover:bg-blue-600 focus:ring-blue-500;
  }

  .btn-secondary {
    @apply bg-green-500 hover:bg-green-600 focus:ring-green-500;
  }

  .btn-accent {
    @apply bg-purple-500 hover:bg-purple-600 focus:ring-purple-500;
  }

  .btn-danger {
    @apply bg-red-500 hover:bg-red-600 focus:ring-red-500;
  }

  .app-header {
    @apply bg-white border-b border-gray-200 shadow-sm fixed top-0 left-0 right-0 z-10;
    height: var(--header-height);
  }

  .content-container {
    @apply pt-[calc(var(--header-height)+1rem)] px-4 pb-4;
  }

  .category-tag {
    @apply px-2 py-1 text-xs rounded-full transition-colors duration-200;
  }

  .category-tag-tech {
    @apply bg-blue-100 text-blue-800;
  }

  .category-tag-design {
    @apply bg-purple-100 text-purple-800;
  }

  .category-tag-entertainment {
    @apply bg-pink-100 text-pink-800;
  }

  .category-tag-news {
    @apply bg-yellow-100 text-yellow-800;
  }

  .category-tag-other {
    @apply bg-gray-100 text-gray-800;
  }

  .category-tag-api {
    @apply bg-green-100 text-green-800;
  }

  .search-input {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200;
  }

  .card-grid {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4;
  }

  .loading-spinner {
    @apply animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500;
  }

  .filter-button {
    @apply px-3 py-1 rounded-full text-sm transition-colors;
  }

  .filter-button-active {
    @apply bg-blue-500 text-white;
  }

  .filter-button-inactive {
    @apply bg-gray-100 text-gray-700 hover:bg-gray-200;
  }
} 